<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/template/internet-template.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:jsf="http://xmlns.jcp.org/jsf"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://xmlns.jcp.org/jsf/html">
    <ui:define name="title">Álbum</ui:define>
    <ui:define name="container">
        <h:form class="formSearch">
            <fieldset>
                <legend>Álbum</legend>
                <h:panelGroup rendered="${albumSearch.album != null}">
                    <label class="titleSearch">${albumSearch.album.title}</label>
                    <hr/>
                    <div style="font-weight: lighter; font-size: 13px">
                        Atualizado por: ${albumSearch.album.updaterUser.name} em
                        <label jsf:value="${albumSearch.album.lastUpdate}">
                            <f:convertDateTime pattern="' 'HH:mm:ss' - 'dd/MM/yyyy"/>
                        </label>                    
                    </div>                                        
                    <br/>
                    Artista:
                    <a class="linksSearch"  style="font-size: 16px;"
                       href="../artist/page.jsp?idArtist=${albumSearch.album.artist.id}">
                        ${albumSearch.album.artist.name}</a>
                    <br/>
                    <br/>
                    Lançado em ${albumSearch.album.year} pela Gravadora ${albumSearch.album.recorder.name}
                    <br/>
                    <br/>
                    <label class="titleSearch" style="font-size: 20px">Músicas</label>
                    <hr/>
                    <br/>
                    <table style="font-weight: normal; width:70%; ">
                        <tr style="font-weight: bold; border-bottom: dashed 1px #3AAACF;">
                            <td style="border-bottom: dashed 1px #3AAACF;">Nome</td>
                            <td style="border-bottom: dashed 1px #3AAACF;">Compositor(es)</td>
                            <td style="border-bottom: dashed 1px #3AAACF;">Duração</td>
                        </tr>
                        <ui:repeat value="${albumSearch.album.songs}" var="song">
                            <tr>
                                <td style="border-bottom: dashed 1px #3AAACF;">
                                    <a style="color: #06799F;text-decoration: underline; font-size: 16;"  href="../song/page.jsp?idSong=${song.id}"> ${song.title} </a>
                                </td>
                                <td style="border-bottom: dashed 1px #3AAACF;">
                                    <ui:repeat value="${song.composers}" var="composer">
                                        ${composer.name}                                         
                                        <br/>
                                    </ui:repeat>
                                </td>    
                                <td style="border-bottom: dashed 1px #3AAACF;">${song.durationMinutes} minuto(s)</td>

                            </tr>
                        </ui:repeat>
                    </table>
                </h:panelGroup>
                <h:panelGroup rendered="${albumSearch.album == null}">
                    Nenhum álbum selecionado.
                </h:panelGroup>
            </fieldset>
        </h:form>
    </ui:define>

</ui:composition>

